 
<script src="resources/js/datagrid-scrollview.js" type="text/javascript"> </script>
<script src="resources/js/jquery-maskedinput-1.3.min.js" type="text/javascript"> </script>
    <script>    
    $(document).ready(function () {
   	 	$("#phone1").mask("999-999-9999");
   	 	$("#phone2").mask("999-999-9999");
   	 	$("#fax").mask("999-999-9999");
   	 	$("#zip").mask("99999");
   	 	
      	 $('#search_customerName').keypress(function (e) {
       		 var key = e.which;
       		 if(key == 13) { // the enter key code
       			searchCustomer();
       		  }
       		});
       	  
       	 $('#search_phone').keypress(function (e) {
       		 var key = e.which;
       		 if(key == 13) { // the enter key code
       			searchCustomer();
       		  }
       		});
       	 
   	});
    
    </script>


	<table id="customer_list" ></table>
	
	<div id="customerlist_toolbar">
	<table cellpadding="5" cellspacing="0" style="width:100%;">  
        <tr>  
            <td>  
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newCustomer()">New</a>
				<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editCustomer()">Edit</a>
								
			</td>
			
			<td class="toolbarlabel_right"> <!-- tool bar label align to the right -->
				Customer Name: <input class="easyui-validatebox" type="text" name="search_customerName" id="search_customerName" data-options="required:false" />
				Phone: <input class="easyui-validatebox" type="text" name="search_phone" id="search_phone" data-options="required:false" />
	        <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"  onclick="searchCustomer()">Search</a>
	        <a href="#" class="easyui-linkbutton" iconCls="icon-reset" plain="true" onclick="reset()">Reset</a>
		        
		    </td>

		 </tr>
	</table>	
	</div>
	
	<!-- start of customer editor -->
	<div id="customerEditor" class="easyui-dialog" style="width:600px;height:600px; padding:0px 20px 0px 20px" closed="true" buttons="#dlg-buttons">
	<div class="ftitle">Customer Editor</div>
	<form id="customerForm" name="customerForm" method="post" novalidate>
		<input type="hidden" id="id" >
		<input type="hidden" id="fmurl" >
		<div class="fitem">
			<label style="width: 100px;">Customer Name:</label>
			<input id="customerName" name="customerName" type="text" style="width: 336px;" class="easyui-validatebox"  required="required" />	
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Contact:</label>
			<input id="contact" name="contact" type="text" style="width: 336px;" class="easyui-validatebox"  />	
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Address 1:</label>
			<input id="address1" name="address1" type="text" style="width: 336px;" class="easyui-validatebox"  required="required" />	
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Address 2:</label>
			<input id="address2" name="address2" type="text" style="width: 336px;" />	
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">City:</label>
			<input id="city" name="city" type="text" style="width: 150px;" class="easyui-validatebox"  required="required" />	
		</div>
		
		<div class="fitem">
		<label style="width: 40px; margin-left: 5px; min-width: 40px;" >State:</label>
					<select id="state" name="state" class="easyui-combobox" style="width:51px; margin-left: 3px;" >
													<option value="NJ">NJ</option>  
											        <option value="NY">NY</option> 
											        <option value="AK">AK</option>
													<option value="AL">AL</option>
													<option value="AR">AR</option>
													<option value="AZ">AZ</option>
													<option value="CA">CA</option>
													<option value="CO">CO</option>
													<option value="CT">CT</option>
													<option value="DC">DC</option>
													<option value="DE">DE</option>
													<option value="FL">FL</option>
													<option value="GA">GA</option>
													<option value="HI">HI</option>
													<option value="IA">IA</option>
													<option value="ID">ID</option>
													<option value="IL">IL</option>
													<option value="IN">IN</option>
													<option value="KS">KS</option>
													<option value="KY">KY</option>
													<option value="LA">LA</option>
													<option value="MA">MA</option>
													<option value="MD">MD</option>
													<option value="ME">ME</option>
													<option value="MI">MI</option>
													<option value="MN">MN</option>
													<option value="MO">MO</option>
													<option value="MS">MS</option>
													<option value="MT">MT</option>
													<option value="NC">NC</option>
													<option value="ND">ND</option>
													<option value="NE">NE</option>
													<option value="NH">NH</option>
													<option value="NM">NM</option>
													<option value="NV">NV</option>
													<option value="OH">OH</option>
													<option value="OK">OK</option>
													<option value="OR">OR</option>
													<option value="PA">PA</option>
													<option value="RI">RI</option>
													<option value="SC">SC</option>
													<option value="SD">SD</option>
													<option value="TN">TN</option>
													<option value="TX">TX</option>
													<option value="UT">UT</option>
													<option value="VA">VA</option>
													<option value="VT">VT</option>
													<option value="WA">WA</option>
													<option value="WI">WI</option>
													<option value="WV">WV</option>
													<option value="WY">WY</option> 
											    </select>
		<input id="zip" name="zip" type="text" style="width: 82px;" maxlength="10" required="required" value="${order.zip}"/>
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Phone:</label>
			<input id="phone1" name="phone1" type="text" class="easyui-validatebox" required="required"  style="width: 150px;"  maxlength="30"  />
				</div>
				<div class="fitem">
			<label style="width: 40px; margin-left: 5px; min-width: 40px;">Cell:</label>
			<input id="phone2" name="phone2" type="text" style="width: 137px;"  maxlength="30"  />
			
		</div>								
		
		<div class="fitem">
			<label style="width: 100px;">Fax:</label>
			<input id="fax" name="fax" type="text" style="width: 150px;"  maxlength="30" />
				</div>
				<div class="fitem">
			<label style="width: 40px; margin-left: 5px; min-width: 40px;">Email:</label>
			<input id="email" name="email" type="text" class="easyui-validatebox"  style="width: 137px;"  maxlength="30" required="required" />			
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Payment Terms:</label>
			<input id="terms" name="terms" type="text" style="width: 150px;"  maxlength="30"  />
				</div>
				<div class="fitem">
			<label style="width: 40px; margin-left: 5px; min-width: 40px;">Status:</label>
			<input id="status" name="status" type="text" class="easyui-validatebox"  style="width: 137px;"  maxlength="30" />			
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Taxable:</label>
			<input id="taxable" name="taxable" type="text" style="width: 150px;"  maxlength="30"  />
				</div>
				<div class="fitem">
			<label style="width: 40px; margin-left: 5px; min-width: 40px;">Rep.:</label>
			<input id="salesRep" name="salesRep" type="text" class="easyui-validatebox"  style="width: 137px;"  maxlength="30" />			
		</div>
		
		<div class="fitem">
			<label style="width: 100px;">Resale #:</label>
			<input id="resaleNum" name="resaleNum" type="text" style="width: 336px;" class="easyui-validatebox"  />	
		</div>
		
		<div class="fitem">
	        <label style="width: 100px;">Notes:</label>
	        <textarea id="notes" name="notes"  style="height:150px;width:336px;"></textarea>  
    	</div>
		
	</form>
</div>
	<div id="dlg-buttons" style="padding:10px 10px 10px 0px">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveCustomer()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#customerEditor').dialog('close')">Cancel</a>
	</div>
	
<script type="text/javascript">
	/*$(function(){
		 $('#customer_list').datagrid();
	}); */
	
	function searchCustomer(){
		// rreload the datagrid using following parameters
		$('#customer_list').datagrid('reload',{ 
			customerName: $('#search_customerName').val(),
			phone1: $('#search_phone').val()      
	    });
	} 
	
	function newCustomer(){
		$('#customerEditor').dialog('open').dialog('setTitle','New Customer');
		$('#customerEditor').form('clear');
		$('#fmurl').val('createCustomer.json');
		$('#terms').val('50% Down');
		$('#status').val('Active');
		// alert($('#todo_screen').tabs('getSelected').prop('title'));			
		// $('#owner').combobox('select', owner);
		// $('#fmurl').val('saveToDo.json');
		// $('#dueDateMsg').html('');
		// $('#priorityMsg').html('');
		// $('#ownerMsg').html('');
		// $('#descMsg').html('');
		// url = 'saveToDo.json';
	}
	
	function editCustomer(){
		var row = $('#customer_list').datagrid('getSelected');
		 // alert(row.id + "|" + row.customerName);
		if (row){
			$('#id').val(row.id);
			$('#customerEditor').dialog('open').dialog('setTitle','Edit Customer');
			$('#customerForm').form('load',row);				
			$('#fmurl').val('updateCustomer.json?id='+row.id);
		}else{
			$.messager.alert('Alert','Please select the Customer to be edited.');
	    	return false;
		}


	}
	
	function saveCustomer(){  
		// alert($('#fmurl').val());
	    $('#customerForm').form('submit',{  
	    	url: $('#fmurl').val(),
	        onSubmit: function(){  
	            return $(this).form('validate');  		            
	        },  
	        success: function(result){
	        	// alert(result);
	            var result = eval('('+result+')');  
	            // alert(result);
	            if (result.success){  
	                $('#customerEditor').dialog('close');      // close the dialog  
	                $('#customer_list').datagrid('reload');
	                $.messager.show({  
	                    title: 'Result',  
	                    msg: 'Customer has been saved successfully.',
	                    width: 400,
                        height: 100,
	                    style:{
	                        right:'',
	                        top:document.body.scrollTop+document.documentElement.scrollTop,
	                        bottom:''
	                    }
	                });  
	            } else {
	            	$.messager.show({  
	                    title: 'Error',
	                    width: 400,
                        height: 200,
                        timeout: 15000,
	                    msg: result.msg,
	                    style:{
	                        right:'',
	                        top:document.body.scrollTop+document.documentElement.scrollTop,
	                        bottom:''
	                    }
	                }); 
	            }  
	        }  
	    });  
	}  
	
	
	$('#customer_list').datagrid({ 
		url: 'searchCustomerByName.json',
		method: 'GET',
		view: scrollview,
	    rownumbers: false,
	    fitColumns: true,
	    nowrap: false,
	    remoteSort: false,
	    height:610,
	    striped: true,
	    singleSelect: true,
	    autoRowHeight:false,
	    pageSize:50,	    
	    toolbar: '#customerlist_toolbar',
		columns:[[  
		        {title:'Id',field:'id',align:'left',width:50, sortable:true}, 
		        {title:'Customer Name',field:'customerName',align:'left', width:350, sortable:true},  
		        {title:'Phone',field:'phone1',align:'center', width:150, sortable:true},
		        {title:'Fax',field:'fax',align:'center',width:150},
		        {title:'Email',field:'email',align:'center',width:150},
		        {title:'Address',field:'address1',align:'center',width:200},
		        {title:'City',field:'city',align:'center',width:150},
		        {title:'State',field:'state',align:'center',width:100},
		        {title:'Contact',field:'contact',align:'center',width:200}
		    ]],
	    onDblClickRow: function(rowIndex, rowData){
	    	editCustomer('#sales_todo');
		}
	
	});	
	
	function reset(){
		$('#search_customerName').val('');
		$('#search_phone').val('');
		searchCustomer();
	}
	
</script>
	
<style type="text/css">
	.datagrid-header-rownumber,.datagrid-cell-rownumber{
		width:40px;
	}
</style>
	

 
 
 